<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios封装库-增删改查</title>
    <!-- 前端调用服务器数据 -->
    <style>
        table {
            border-collapse: collapse;
            width: 400px;
        }

        th,
        td {
            border: 1px solid salmon;
            text-align: center;
        }

        /* 添加 */
        .adds {
            border: 2px solid palevioletred;
            margin-top: 20px;
            width: 400px;
            text-align: center;
        }

        .adds input {
            outline: none;
        }
    </style>
</head>

<body>
    <!-- 查询数据 -->
    <table>
        <thead>
            <tr>
                <th>账号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <button id="first">首页</button>
                    <button id="up">上一页</button>
                    <span id="pageIndex"></span>
                    <span>/</span>
                    <span id="pageAll"></span>
                    <button id="next">下一页</button>
                    <button id="end">尾页</button>
                </td>
            </tr>
        </tfoot>
    </table>
    <!-- 添加数据 -->
    <div class="adds">
        <p>
            账号：
            <input type="text" id="adds_id">
        </p>
        <p>
            姓名: <input type="text" id="adds_name">
        </p>
        <p>
            年龄: <input type="text" id="adds_age">
        </p>
        <p>
            性别: <input type="radio" value="男" name="sex" checked>男
            <input type="radio" value="女" name="sex">女
        </p>
        <p>
            <button id="btn_add">添加</button>
            <button id="btn_cancel">取消</button>
        </p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!--引入axios文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.js"></script>
    <script>
        // 当前页面
        let pageIndex = 1
        // 总页数
        let pageAll = 1
        // 每页显示5条
        let pageNumber = 5

        // axios.get/post/put/delete
        // async   await

        // 异步方式
        /* async function loadData1(){
            $("#tbody").html("")
            let {data:{page,count}} = await axios.get("http://127.0.0.1:8080/pages",{
                params:{pageIndex,pageNumber}
            })
            // console.log(data);
        }
        loadData1() */

        function loadData() {
            // 清除
            $("#tbody").html("")
            // jQuery 做法
            // 分页效果
            axios.get("http://127.0.0.1:8080/pages", {
                params: {
                    pageIndex,
                    pageNumber
                }
            }).then(res => {
                // axios 返回的是 promise 中的 data 
                let {
                    data: {
                        page,
                        count
                    }
                } = res
                // console.log(res);
                // 计算总页数
                pageAll = Math.ceil(count / pageNumber)
                // console.log(pageAll);
                // 显示分页数
                $("#pageIndex").html(pageIndex)
                $("#pageAll").html(pageAll)
                // 遍历拿取信息
                // 填写值
                page.forEach(item => {
                    let tr = $(`
            <tr>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.sex}</td>
                <td>
                    <button onclick="amend_infor('${item.id}')">编辑</button>
                    <button onclick="delete_infor('${item.id}')">删除</button>
                </td>
            </tr>
            `)
                    $("#tbody").append(tr)
                });
            })
        }
        loadData()
        // 首页
        $('#first').click(function () {
            pageIndex = 1
            loadData()
        })
        // 尾页
        $('#end').click(function () {
            pageIndex = pageAll
            loadData()
        })
        // 上一页
        $('#up').click(function () {
            if (pageIndex-- <= 1) {
                pageIndex = 1
            }
            loadData()
        })
        // 下一页
        $('#next').click(function () {
            if (pageIndex++ >= pageAll) {
                pageIndex = pageAll
            }
            loadData()
        })
        $("#btn_add").click(async function () {
            let id = $("#adds_id").val()
            let name = $("#adds_name").val()
            let age = $("#adds_age").val()
            // ... 解构
            // find 寻找
            let sex = [...$("input[name='sex']")].find(key => key.checked).value
            // 将获取的数据添加到一个对象当中
            // 属性值和属性名都一样 可以只写一个
            let arrinf = {
                id,
                name,
                age,
                sex
            }
            // console.log(arrinf);
            if (!id || !name || !age || !sex) {
                alert("信息不能为空，请输入内容")
                return
            }
            if ($(this).html() == "添加") {
                // 异步 async await
                // 添加内容前根据id账号 判断id是否已存在
                let {
                    data
                } = await axios.get("http://127.0.0.1:8080/getInforOne", {
                    params: {
                        id
                    }
                })
                if (data) {
                    alert("账号已存在，添加失败")
                    return
                }

                // 添加内容
                // {data:res_add} 解构 data 的同时 给data换个名字
                let {
                    data: res_add
                } = await axios.post("http://127.0.0.1:8080/add", arrinf)
                if (res_add) {
                    alert("添加成功")
                    loadData()
                    // 调用取消按钮的点击事件，清除内容
                    $("#btn_cancel").click()
                }
            }else{
                // 修改
                axios.post("http://127.0.0.1:8080/amendInfor", arrinf).then(res=>{
                    let {data} = res
                    if (data) {
                        alert("修改成功")
                        loadData()
                        // 调用取消按钮的点击事件，清除内容
                        $("#btn_cancel").click()
                    }
                })
            }
        })
        $("#btn_cancel").click(function () {
            $("#adds_id").val("").removeAttr("readonly")
            $("#adds_name").val("")
            $("#adds_age").val("")
            // 点击取消后 ，选中默认的那一种状态
            $("input[name='sex']")[0].checked = true
            $("#btn_add").html("添加")
        })

        // 根据id获取 
        async function amend_infor(id) {
            // axios
            // 异步
            // 解构   换名
            let {data:res_inf} = await axios.get("http://127.0.0.1:8080/getInforOne",{
                params:{id}
            })
             // 只读 不可修改
             $("#adds_id").val(res_inf.id).attr("readonly", "readonly");
                $("#adds_name").val(res_inf.name);
                $("#adds_age").val(res_inf.age);
                // ...是扩展运算符 扩展成一个数组
                [...document.getElementsByName("sex")].find(items => {
                    if (items.value == res_inf.sex) {
                        items.checked = true
                        // console.log(items)
                    }
                })
                // 点击编辑后 添加按钮变为修改按钮
                $("#btn_add").html("修改")
        }

        // 删除
        function delete_infor(id) {
            if (confirm("你确定要删除嘛，宝~")) {
                // axios
                axios.post("http://127.0.0.1:8080/delete",{id}).then(res=>{
                    let {data} =res
                    if (data) {
                        alert("删除成功")
                        loadData()
                    } else {
                        alert("删除失败")
                    }
                })
            }
        }
    </script>
</body>

</html>